<!-- 想定描述页面 -->
<template>
    <div class="task-detail-container">
        <div class="task-detail-content">
            <div class="t-info">
                <div class="t-info__statistics">
                    <div class="t-info__statistics_title">
                        任务信息
                    </div>

                    <div class="t-info__statistics_content">
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">5</div>
                            <div class="t-info__statistics_item_name">任务ID</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">第一个任务</div>
                            <div class="t-info__statistics_item_name">任务名称</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_num">2023/1/1 10:22:22</div>
                            <div class="t-info__statistics_item_name">创建时间</div>
                        </div>
                        <div class="t-info__statistics_item">
                            <div class="t-info__statistics_item_word">
                                这
                            </div>
                            <div class="t-info__statistics_item_name">任务描述</div>
                        </div>
                    </div>
                </div>

                <div class="t-info__flow">
                    <div class="t-info__flow_operate">
                        <div class="t-info__flow_operate_item">
                            <el-tag @click="handleClick('selectExperiment')">点击选择</el-tag>
                        </div>
                        <div class="t-info__flow_operate_item">
                            <el-tag @click="handleClick('selectIndex')">点击选择</el-tag>
                        </div>
                        <div class="t-info__flow_operate_item">
                            <el-tag @click="handleClick('dllUpload')">点击上传</el-tag>
                        </div>
                        <div class="t-info__flow_operate_item">
                            <el-tag @click="handleClick('export')">点击导出</el-tag>
                        </div>
                    </div>
                    <div class="t-info__flow_split"></div>
                    <div class="t-info__flow_title">
                        <div class="t-info__flow_title_item">
                            <el-tag>1.试验选择</el-tag>
                        </div>
                        <div class="t-info__flow_title_item">
                            <el-tag>2.指标关联</el-tag>
                        </div>
                        <div class="t-info__flow_title_item">
                            <el-tag>3.动态链接库上传</el-tag>
                        </div>
                        <div class="t-info__flow_title_item">
                            <el-tag>4.输出文件</el-tag>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <SelectExperimentDialog ref="selectExperimentDialog"></SelectExperimentDialog>
        <SelectIndexDialog ref="selectIndexDialog"></SelectIndexDialog>
        <UploadDllDialog ref="uploadDllDialog"></UploadDllDialog>
    </div>
</template>

<script>
import SelectExperimentDialog from './select-experiment-dialog.vue';
import SelectIndexDialog from './select-index-dialog.vue';
import UploadDllDialog from './upload-dll-dialog.vue';
export default {
    data() {
        const basePathUrl = window.basePathUrl || ''
        return {
            configUrl: basePathUrl + '/config/map.json',
            configOptions: {
                "control": {
                    "homeButton": false,
                    "sceneModePicker": false,
                    "contextmenu": {
                        "enabled": false,
                    },
                    "zoom": {
                        "enabled": false,
                    },
                    "mouseDownView": false,
                    "locationBar": {
                        "enabled": false,
                    }
                },
            },
            subjectOptions: [{
                value: '科目一',
                label: '科目一'
            }, {
                value: '科目二',
                label: '科目二'
            }],
            difficultyOptions: [{
                value: '容易',
                label: '容易'
            }, {
                value: '中等',
                label: '中等'
            }, {
                value: '困难',
                label: '困难'
            }],
            form: {},
            selectedNodeInfo: {}, // 当前选中节点的信息
            scenarioDataList: [], // 想定数据列表
        }
    },
    components: {
        SelectExperimentDialog,
        SelectIndexDialog,
        UploadDllDialog
    },
    props: {
        nodeInfo: {
            type: Object,
        }
    },

    mounted() {
        this.form = this.nodeInfo.data;
    },

    methods: {
        submitForm() { },
        enterExperiment() {
            this.$router.push({ name: "experimentBuild", query: { experimentId: this.nodeInfo.id } })
        },
        handleClick(flag) { 
            if (flag == 'selectExperiment') {
                this.$refs.selectExperimentDialog.dialogVisible = true
            }else if (flag == 'selectIndex') { 
                this.$refs.selectIndexDialog.dialogVisible = true
            }else if (flag == 'dllUpload') {
                this.$refs.uploadDllDialog.dialogVisible = true
            }else if (flag == 'export') { 
                console.log("导出");
            }
            console.log(flag);
        },
    }
}

</script>

<style lang="scss" scoped>
.task-detail-container {
    width: 100%;
    height: 65%;

    .task-detail-content {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-top: 20px;
        .t-info {
            width: 80%;

            .t-info__statistics {
                border-radius: 5px;
                padding: 10px 20px;
                background-color: var(--ui-component-background-alt);
                margin-bottom: 30px;

                .t-info__statistics_title {
                    font-size: var(--ui-font-size-base);
                }

                .t-info__statistics_content {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 20px;
                    flex-wrap: wrap;

                    .t-info__statistics_item {
                        .t-info__statistics_item_num {
                            font-size: var(--ui-font-size-title);
                        }

                        .t-info__statistics_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .t-info__statistics_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 10px;
                            margin-bottom: 20px;

                        }
                    }

                    & :last-child {
                        width: 100%;
                    }
                }

            }

            .t-info__flow {
                height: 300px;
                border-radius: 5px;
                padding-top: 120px;
                background-color: var(--ui-component-background-alt);

                .t-info__flow_operate {
                    display: flex;
                    justify-content: space-between;

                    .t-info__flow_operate_item {
                        width: 25%;
                        display: flex;
                        justify-content: center;
                        cursor: pointer;
                    }
                }

                .t-info__flow_split {
                    border-bottom: 1px solid var(--app-primary-base);
                    margin-top: 5px;
                    margin-bottom: 5px;
                }

                .t-info__flow_title {
                    display: flex;
                    justify-content: space-between;

                    .t-info__flow_title_item {
                        width: 25%;
                        display: flex;
                        justify-content: center;
                    }
                }
            }

            .jtyj-input {
                width: 100%;
            }

        }
    }
}
</style>